<template>
  <div class="image-captcha">
    <el-row :gutter="10">
      <el-col :span="16">
        <el-input 
          v-model="captchaCode" 
          :placeholder="$t('m.loginRegist.plzInputCode')"
          @keyup.enter.native="onEnter"
          :maxlength="5"
          auto-complete="off">
        </el-input>
      </el-col>
      <el-col :span="8">
        <div class="captcha-image-container">
          <img 
            v-if="captchaImage" 
            :src="captchaImage" 
            @click="refreshCaptcha"
            class="captcha-image"
            :alt="$t('m.loginRegist.plzInputCode')"
            :title="$t('m.loginRegist.clickRefreshCaptcha')">
          <div v-else-if="loadingState === 'loading'" class="captcha-loading">
            {{ $t('m.userCenter.verificationLoading') }}
          </div>
          <div v-else-if="loadingState === 'failed'" class="captcha-failed" @click="refreshCaptcha">
            <i class="el-icon-refresh"></i>
            <small>{{ $t('m.loginRegist.clickRetry') }}</small>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { loginRegist } from 'api/loginRegist'

export default {
  name: 'ImageCaptcha',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      captchaCode: '',
      captchaImage: '',
      captchaId: '',
      loadingState: 'loading' // 'loading', 'failed'
    }
  },
  watch: {
    captchaCode(newVal) {
      this.$emit('input', newVal)
    },
    value(newVal) {
      this.captchaCode = newVal
    }
  },
  mounted() {
    this.refreshCaptcha()
  },
  methods: {
    async refreshCaptcha() {
      try {
        this.captchaImage = ''
        this.loadingState = 'loading'
        const res = await loginRegist.getImageCaptcha()
        if (res.code === 200) {
          // 兼容后端 data 直接为 base64 字符串
          this.captchaImage = res.data.image
          this.loadingState = ''
          // 如果有 captchaId 字段才赋值
          if (res.data.captchaId) {
            this.captchaId = res.data.captchaId
            this.$emit('captcha-loaded', this.captchaId)
          }
        } else {
          this.loadingState = 'failed'
          this.$message.error(res.errmsg || this.$t('m.loginRegist.getCaptchaFailed'))
        }
      } catch (error) {
        console.error(this.$t('m.loginRegist.getCaptchaFailed'), error)
        this.loadingState = 'failed'
        this.$message.error(this.$t('m.loginRegist.getCaptchaFailed'))
      }
    },
    onEnter() {
      this.$emit('enter')
    },
    reset() {
      this.captchaCode = ''
      this.refreshCaptcha()
    }
  }
}
</script>

<style lang="stylus" scoped>
.image-captcha
  .captcha-image-container
    height: 40px
    display: flex
    align-items: center
    justify-content: center
    border: 1px solid #dcdfe6
    border-radius: 4px
    background: #f5f7fa
    
    .captcha-image
      max-width: 100%
      max-height: 100%
      cursor: pointer
      border-radius: 3px
      
    .captcha-loading
      color: #909399
      font-size: 12px
      text-align: center

    .captcha-failed
      color: #f56c6c
      font-size: 10px
      text-align: center
      cursor: pointer
      padding: 2px 4px
      border-radius: 3px
      transition: all 0.3s ease
      display: flex
      flex-direction: column
      justify-content: center
      align-items: center
      height: 100%
      line-height: 1.2
      
      i
        font-size: 12px
        margin-bottom: 2px
        display: block
        
      small
        color: #909399
        font-size: 8px
        
      &:hover
        background-color: #fef0f0
        color: #e6a23c
</style> 